.challenge-page {
  .challenge-id-form {
    white-space: nowrap;
  }

  .invite {
    display: flex;
    flex-flow: row wrap;

    > div {
      @extend %box-radius;

      padding: 2em 2em 1em 2em;
      background: $c-bg-zebra;
      margin: 1em;
      flex: 1 1 auto;
    }
  }

  .waiting {
    text-align: center;

    .user-link {
      font-size: 2em;
    }

    .spinner {
      width: 13em;
      height: 13em;
      margin: 2em auto;
    }
  }

  .cancel {
    margin: 2em 0;
    text-align: center;
  }

  .details {
    @extend %flex-between;

    $c-bg: mix($c-good, $c-bg-box, 10%);
    --c-font: #{$c-good};
    --c-bg: #{$c-bg};

    border-radius: 99px;
    padding: 0.5em 1.1em;
    margin-bottom: 3rem;
    font-size: 2em;
    background: var(--c-bg);
    border: 1px solid var(--c-font);

    > div {
      @extend %flex-center, %roboto;

      &::before {
        color: var(--c-font);
        font-size: 6rem;
        margin-right: 0.2em;
      }

      div {
        line-height: 1.4;
      }

      .clock {
        font-weight: bold;
      }
    }

    .mode {
      font-weight: bold;
      color: var(--c-font);
      text-transform: uppercase;
    }
  }

  &.challenge--declined .details {
    $c-bg: mix($c-bad, $c-bg-box, 10%);
    --c-font: #{$c-bad};
    --c-bg: #{$c-bg};
  }

  .challenge-reason {
    margin: 2em auto 5em auto;
    max-width: 70ch;
  }

  .follow-up .button {
    display: block;
    margin-top: 2em;
  }

  .board-preview {
    margin: 0 auto;
    max-width: 300px;
  }
}

.challenge-theirs {
  .button-fat {
    display: block;
    width: 100%;
    margin-top: 2em;
  }
}
